<script setup>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
</script>

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和处理过后为：{{ bigSum }}</h3>
    <h3>我在{{ school }}学{{ subject }}</h3>
    <div class="option">
      <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button @click="increment(n)">+</button>
      <button @click="decrement(n)">-</button>
      <button @click="incrementOdd(n)">当前求和为奇数再加</button>
      <button @click="incrementWait(n)">等一等再加</button>
    </div>
    <div>人员数：{{ personList.length }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    ...mapMutations("count", {
      increment: "Increment",
      decrement: "Decrement",
    }),
    ...mapActions("count", ["incrementOdd", "incrementWait"]),
  },
  computed: {
    ...mapState("count", ["sum", "school", "subject"]),
    ...mapState("person", ["personList"]),

    ...mapGetters("count", ["bigSum"]),
  },
};
</script>

<style scoped>
.option {
  display: flex;
  gap: 3px;
}
</style>
